<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增赛事</title> 

    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript">
        $(function(){

//            var periods = $("#periods option:selected").val("aaaa");
//            alert(periods);

            $("#add").click(function(){

                // 请求数据体
                var requestData = {					
                    'gamName' : $('#gamName').val(), // 通过id查找标签元素，val()获取该标签元素的值
                    'gameIntroduction' : $('#gameIntroduction').val(),
                    'gameSponsor' : $('#gameSponsor').val(),
                    'gameIntroduction' : $('#gameIntroduction').val(),
                    'gameTime' : $('#gameTime').val(),
                    'periods' :  $("#periods option:selected").text(),
                    'gameType' : $("#gameType option:selected").text(),
                    'remark' : $('#remark').val()
                };

                $.ajax({
                    url: "/api/v1/game/info",
                    type: "POST",
                    data: JSON.stringify(requestData), // data:发送数据，JSON.stringify()转成json字符串
                    crossDomain: true, // 跨域，即不同域名、端口号可以访问
                    contentType: 'application/json; charset=utf-8',  // 请求体数据格式 json字符串

                    success:function(d){ // 请求成功时执行的回调函数，d: 返回数据(json格式)
                        //alert("ok")
                        if(d['status']==500){
                            alert(d['data']);
                        }
                        if(d['status']==200){
                            alert("预约成功");
                            window.opener.location.href = window.opener.location.href;
                            window.close();
                        }
                    },
                    error:function(){}, // 同理，请求失败执行的回调函数
                    dataType:"json" // 返回数据的格式 json
                });
            });
          
            // 预约日期
            $('.form_datetime').datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒 
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn:  1,
                autoclose: 1,
            });
        }); 

    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12 an12">
                <form class="form-horizontal" role="form">
                    <legend>预约赛事</legend>
                    <hr>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">赛事名称</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="gamName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">赛事简介</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="gameIntroduction"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">赛事主办单位</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="gameSponsor"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">赛事举办日期</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control form_datetime" id="gameTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">当天场次</label>
                        <div class="col-sm-4">
                            <select id="periods">
                                <option value="上午场">上午场</option>
                                <option value="下午场">下午场</option>
                                <option value="晚上场">晚上场</option>
                            </select>
                            <!--<button class="btn btn-large btn-success" type="button" id="morning">上午场</button>-->
                            <!--<button class="btn btn-large btn-success" type="button" id="afternoon">下午场</button>-->
                            <!--<button class="btn btn-large btn-success" type="button" id="evening">晚上场</button>-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">赛事类型</label>
                        <div class="col-sm-4">
                            <select id="gameType">
                                <option value="篮球比赛">篮球比赛</option>
                                <option value="足球比赛">足球比赛</option>
                                <option value="排球比赛">排球比赛</option>
                                <option value="羽毛球比赛">羽毛球比赛</option>
                                <option value="网球比赛">网球比赛</option>
                                <option value="乒乓球比赛">乒乓球比赛</option>
                                <option value="毽子比赛">毽子比赛</option>
                                <option value="跳绳比赛">跳绳比赛</option>
                                <option value="轮滑比赛">轮滑比赛</option>
                                <option value="垒球比赛">垒球比赛</option>
                                <option value="其他">其他</option>
                            </select>
                            <!--<input type="text" class="form-control" id="gameType"/>-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="remark"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-info" type="button" id="add">预约</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>